<template>
  <crud-table :config="crudConfig" />
</template>

<script setup>
import { h, ref, onMounted } from 'vue'
import { NTag, NImage, NSwitch } from 'naive-ui'
import moment from 'moment' 
import request from '@/utils/request.js'

// 广告类型选项
const adTypes = ref([])

// 获取广告类型字典
const fetchAdTypes = async () => {
  const res = await request.get('/dictionary-details/ad_category')
  adTypes.value = res.map(item => ({
    label: item.dict_value,
    value: item.dict_key
  }))
}

// 在组件挂载时获取广告类型
onMounted(() => {
  fetchAdTypes()
})

const crudConfig = {
  title: '广告管理',
  apiPrefix: '/ads',
  primaryKey: 'id',
  searchable: true,
  creatable: true,
  editable: true,
  deletable: true,
  switchable: true,
  switchKey: 'status',

  // 表格配置
  tableConfig: {
    rowKey: 'id',
    pagination: true,
    bordered: false,
    striped: true,
    size: 'medium',
    scrollX: 1400,
    defaultExpandAll: false
  },

  // 工具栏配置
  toolbar: {
    refresh: true,
    density: true,
    setting: true,
    fullscreen: true
  },

  // 表格列配置
  columns: [
    { title: '标题', key: 'title'},
    {
      title: '类型',
      key: 'type',
      render: (row) => {
        const type = adTypes.value.find(t => t.value === row.type)
        return h(NTag, {
          type: 'info',
          size: 'small',
          round: true,
          bordered: false
        }, { default: () => type ? type.label : row.type })
      }
    },
    { title: '链接', key: 'href', width: 250 },
    {
      title: '图片',
      key: 'img',
      render: (row) => {
        return row.img ? h(NImage, {
          width: 50,
          src: row.img,
          objectFit: 'cover'
        }) : '暂无图片'
      }
    },
    {
      title: '创建时间',
      key: 'created_at',
      render: (row) => moment(row.created_at).format('YYYY-MM-DD HH:mm:ss')
    }
  ],

  // 搜索字段配置
  searchFields: [
    {
      label: '标题',
      key: 'title',
      type: 'input',
      placeholder: '请输入广告标题'
    },
    {
      label: '类型',
      key: 'type',
      type: 'select',
      placeholder: '请选择广告类型',
      options: adTypes
    },
    {
      label: '状态',
      key: 'status',
      type: 'select',
      placeholder: '请选择状态',
      options: [
        { label: '启用', value: 1 },
        { label: '禁用', value: 0 }
      ]
    }
  ],

  // 表单字段配置
  formFields: [
    {
      label: '标题',
      key: 'title',
      type: 'input',
      placeholder: '请输入广告标题',
      required: true,
      span: 24
    },
    {
      label: '类型',
      key: 'type',
      type: 'select',
      placeholder: '请选择广告类型',
      options: adTypes,
      required: true,
      span: 24
    },
    {
      label: '链接',
      key: 'href',
      type: 'input',
      placeholder: '请输入广告链接',
      span: 24
    },
    {
      label: '图片',
      key: 'img',
      type: 'imageUpload',
      span: 24, 
    },

  ],

  // 表单验证规则
  rules: {
    title: {
      required: true,
      message: '请输入广告标题',
      trigger: 'blur'
    },
    type: {
      required: true,
      message: '请选择广告类型',
      trigger: 'change'
    }
  }
}
</script>
